<template>
	<div>
		<el-dialog
			title="数据配置"
			:visible.sync="visible"
			:before-close="beforeClose"
			:close-on-click-modal="false"
			append-to-body
			width="50%"
			class="editDialog"
		>
			<!-- <shyt-table
				:config="config"
				ref="shytTable"
				@editTableRowBtn="editTableRowBtn"
				@toolbarButtonClickEvent="toolbarButtonClickEvent"
			></shyt-table> -->
			<div style="margin-bottom: 10px; display: flex; align-items: center">
				<span>数据地址:</span>
				<el-input
					v-model="url"
					placeholder="请输入地址"
					style="width: 50%; margin-left: 5px"
					size="small"
					clearable
				/>
				<el-button
					type="primary"
					size="small"
					style="margin-left: 5px"
					@click="handlerGetdata"
				>
					获取数据
				</el-button>
				<el-tooltip
					class="item"
					effect="dark"
					content="输入地址后以远程地址数据为主，以本地数据为主请获取数据后清除地址"
					placement="top-start"
				>
					<i class="el-icon-info" style="margin-left: 5px" />
				</el-tooltip>
			</div>
			<shyt-table
				ref="shytTable"
				:columns="computedColumns"
				:data="tableData"
				:auto-resize="true"
				:keep-source="true"
				row-id="id"
				:toolbar-config="toolbarConfig"
				:edit-config="{}"
				:tree-config="{ children: 'children', expandAll: true }"
				@toolbar-button-click="toolbarButtonClick"
			>
				<!-- <template #edit="{ row }">
          <el-button
            type="text"
            size="default"
            @click="handlerEditRow(row)"
          >
            编辑
          </el-button>
        </template> -->
			</shyt-table>
			<div slot="footer">
				<el-button @click="handlerCancel">取消</el-button>
				<el-button type="primary" @click="handlerSubmit">提交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		visible: Boolean,
		tableSelectData: {
			type: Array,
			default: () => [],
		},
		columns: {
			type: Array,
			default: () => [],
		},
		tableDataUrl: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			tableData: [],
			$table: null,
			url: '',
			toolbarConfig: {
				// buttons: [
				//   { code: "myInsert", name: "新增" },
				//   { code: "myDelete", name: "删除" },
				//   {
				//     code: "mySave",
				//     name: "保存",
				//     status: "success"
				//   },
				//   {
				//     code: "reSet",
				//     name: "重置",
				//     status: "info"
				//   }
				// ]
			},
		}
	},
	computed: {
		// tableData() {
		// 	return this.tableSelectData
		// },
		computedColumns() {
			const arr = this.columns.map((i, index) => {
				return {
					title: i.title,
					field: i.field,
					width: i.width,
					treeNode: index === 0 ? true : false,
					editRender: { name: 'ElInput' },
				}
			})
			return [
				{ type: 'checkbox', width: 50 },
				...arr,
				// {
				//   title: "操作",
				//   slots: { default: "edit" }
				// }
			]
		},
	},
	watch: {
		visible: {
			handler: function (val) {
				if (val) {
					this.$nextTick(() => {
						this.$table = this.$refs.shytTable.$refs.xTable
					})
				}
			},
			immediate: true,
		},
		tableSelectData: {
			handler: function (val) {
				// if (val) {
				// 	this.$nextTick(() => {
				// 		this.$table = this.$refs.shytTable.$refs.xTable
				// 	})
				// }
				this.tableData = val
			},
			immediate: true,
		},
		tableDataUrl: {
			handler: function (val) {
				this.url = val
			},
			immediate: true,
		},
	},
	methods: {
		handlerGetdata() {
			// this.tableData = []
			if (this.url.includes('http://') || this.url.includes('https://')) {
				this.$axios
					.get(this.url)
					.then(({ data }) => {
						if (data.data) {
							// this.$emit('tableHeaderEdit', data.data)
							// this.$nextTick(() => {
							// 	this.handlerCancel()
							// })
							this.tableData = [...data.data]
						} else {
							this.tableData = [...data]
						}
					})
					.catch(() => {
						this.$message.error('获取数据失败')
					})
			} else {
				this.$message.error('请检查地址是否完整')
			}
		},
		handlerEditRow(row) {
			// console.log(row)
			this.$table.setActiveRow(row)
		},
		beforeClose() {
			this.$emit('update:visible', false)
		},
		toolbarButtonClick(btn) {
			if (btn.code === 'mySave') {
				const { tableData } = this.$table.getTableData()
				this.$emit('tableDataEdit', tableData, this.url)
			} else if (btn.code === 'reSet') {
				this.$table.revertData()
			} else if (btn.code === 'myInsert') {
				this.$table.insert()
			} else if (btn.code === 'myDelete') {
				this.$table.removeCheckboxRow()
			}
		},
		handlerCancel() {
			this.beforeClose()
		},
		handlerSubmit() {
			const { tableData } = this.$table.getTableData()
			this.$emit('tableDataEdit', tableData, this.url)
			this.beforeClose()
		},
	},
}
</script>

<style lang="scss"></style>
